<template>
  <div class="wrapper">
    <el-row :gutter="32">
      <el-col :md="12" :sm="24" :xs="24" v-for="item in data" :key="item.id">
        <page-blog-part v-bind="item" :direction="item.direction ? item.direction : 'left'"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PageBlogPart from '@/views/part/index/PageBlogPart'

import img1 from '@img/blog/img1.jpg'
import img2 from '@img/blog/img2.jpg'

export default {
  name: 'PageBlog',
  components: {
    'page-blog-part': PageBlogPart
  },
  data () {
    const data = [
      {
        id: '1',
        image: img1,
        title: 'Spice up your outfits with state get a necklace.',
        time: '2018/09/15',
        author: 'Andreow',
        content: 'There are many variations of pass ages of Lorem Ipsum available, but the majority have suffered alterat ion in some form injected.'
      }, {
        id: '2',
        image: img2,
        title: 'These variation sneakers will make you heels.',
        time: '2018/12/01',
        author: 'Andreow',
        content: 'There are many variations of pass ages of Lorem Ipsum available, but the majority have suffered alterat ion in some form injected.'
      }, {
        id: '3',
        image: img2,
        title: 'These variation sneakers will make you heels.',
        time: '2018/11/05',
        author: 'Andreow',
        content: 'There are many variations of pass ages of Lorem Ipsum available, but the majority have suffered alterat ion in some form injected.',
        direction: 'right'
      }, {
        id: '4',
        image: img1,
        title: 'These variation sneakers will make you heels.',
        time: '2018/02/11',
        author: 'Andreow',
        content: 'There are many variations of pass ages of Lorem Ipsum available, but the majority have suffered alterat ion in some form injected.',
        direction: 'right'
      }
    ]
    return {
      data
    }
  }
}
</script>

<style lang="scss" scoped>

  .wrapper{
    margin-top: 30px;
  }

</style>
